<template>
  <div class="impedance">
    <div class="report_title">生物电阻抗</div>
    <div class="impedance-table">
      <div class="flex">
        <div class="impedance-table_left"></div>
        <div class="impedance-table_right flex">
          <p
            class="impedance-table_right-item impedance-table_right-title"
            v-for="item in tableTheadTitle"
            :key="item"
          >
            {{ item }}
          </p>
        </div>
      </div>
      <div class="impedance-table-item flex" v-for="item in resistanceData" :key="item.name">
        <div class="impedance-table_left">{{ item.name }}</div>
        <div class="impedance-table_right flex">
          <p
            class="impedance-table_right-item"
            v-for="(itemValue, index) in item.value"
            :key="index"
          >
            {{ itemValue }}
          </p>
        </div>
      </div>
    </div>
    <p class="impedance-tip">
      *
      所有指标均是通过设备（脂肪秤）测量人体生物电阻抗后，结合人体成分组成得出，数值仅作为控制体型和长期健身参考使用，不作为医疗诊断的依据
    </p>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { TypedScaleData } from '@yolanda-qn/eight-electrodes-report-lib/dist/types/src/typings'
@Component({})
export default class extends Vue {
  @Prop() measureData!: TypedScaleData
  tableTheadTitle = Object.freeze(['左上肢', '右上肢', '躯干', '左下肢', '右下肢'])
  get resistanceData() {
    const {
      resistance20_left_arm,
      resistance20_right_arm,
      resistance20_left_leg,
      resistance20_right_leg,
      resistance20_trunk,
      resistance100_left_arm,
      resistance100_right_arm,
      resistance100_left_leg,
      resistance100_right_leg,
      resistance100_trunk,
    } = this.measureData
    const resistance20Data = [
      resistance20_left_arm,
      resistance20_right_arm,
      resistance20_trunk,
      resistance20_left_leg,
      resistance20_right_leg,
    ]
    const resistance100Data = [
      resistance100_left_arm,
      resistance100_right_arm,
      resistance100_trunk,
      resistance100_left_leg,
      resistance100_right_leg,
    ]
    const resistanceData = [
      { name: 'Z(Ω)20kHz', value: resistance20Data },
      { name: '100kHz', value: resistance100Data },
    ]
    return resistanceData
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/main.scss';
@import '../index.scss';
.impedance {
  width: 100%;
  background: $mainColor9;
  box-shadow: 0 rem(3) rem(4) 0 rgba(0, 0, 0, 0.03);
  border-radius: rem(16);
  margin-top: rem(20);
  padding: 0 rem(24) rem(36);
}
.impedance-table {
  background: $primaryBg;
  border: rem(2) solid $primaryBorder;
  padding: rem(27) rem(24);
  font-size: rem(22);
  font-weight: 500;
  color: #303133;
  line-height: rem(30);
  .impedance-table-item {
    margin-top: rem(16);
  }
  .impedance-table_left {
    text-align: right;
    width: rem(115);
  }
  .impedance-table_right {
    flex: 1;
    margin-left: rem(23);
  }
  .impedance-table_right-item {
    flex: 1;
    text-align: center;
    color: $secondaryColor;
    &.impedance-table_right-title {
      color: #303133;
    }
  }
}
.impedance-tip {
  font-size: rem(22);
  color: $secondaryColor;
  line-height: rem(30);
  margin-top: rem(20);
}
</style>
